<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="7" :offset='1'>
				<el-form-item label="人员状态:" prop="personStatus">
					<el-select size="mini" v-model="form.personStatus" placeholder="请选择人员状态" clearable :disabled='detailDisable'>
						<el-option v-for="item in personStatusArr" :value="item.value" :label="item.label" :key='item.value'>
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="身份证号:" prop="identity">
					<el-input size="mini" v-model="form.identity" autocomplete="off" clearable :disabled='detailDisable'></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="家庭住址:" prop="homeAddress">
					<el-input size="mini" v-model="form.homeAddress" autocomplete="off" clearable :disabled='detailDisable'></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="7" :offset='1'>
				<el-form-item label="T1证号:">
					<el-input size="mini" v-model="form.t1Papers" autocomplete="off" clearable :disabled='detailDisable' @change="t1Change"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="T1证有效期:">
					<el-date-picker size="mini" v-model="form.t1PapersTime" type="date" placeholder="请选择T1证有效期" format="yyyy-MM-dd"
					 value-format="yyyy-MM-dd" clearable :disabled='detailDisable || t1Num'>
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="T2证号:">
					<el-input size="mini" v-model="form.t2Papers" autocomplete="off" clearable :disabled='detailDisable' @change="t2Change"></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="7" :offset='1'>
				<el-form-item label="T2证有效期:">
					<el-date-picker size="mini" v-model="form.t2PapersTime" type="date" placeholder="请选择T2证有效期" format="yyyy-MM-dd"
					 value-format="yyyy-MM-dd" clearable :disabled='detailDisable || t2Num'>
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="合同开始日期:" prop="pactStartTime">
					<el-date-picker size="mini" v-model="form.pactStartTime" type="date" placeholder="请选择合同开始日期" format="yyyy-MM-dd"
					 value-format="yyyy-MM-dd" clearable :disabled='detailDisable' @change="pactTimeChange">
					</el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="合同结束日期:" prop='pactEndTime'>
					<el-date-picker size="mini" v-model="form.pactEndTime" type="date" placeholder="请选择合同结束日期" format="yyyy-MM-dd"
					 value-format="yyyy-MM-dd" clearable :picker-options="pickerOptions" :disabled='detailDisable || pactDis'>
					</el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="7" :offset='1'>
				<el-form-item label="T1证附件:">
					<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList1" :on-change="upLoadChange1"
					 :on-remove="upLoadRemove1" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
						<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传</el-button>
						<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
					</el-upload>
				</el-form-item>
			</el-col>
			<el-col :span="7">
				<el-form-item label="T2证附件:">
					<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList2" :on-change="upLoadChange2"
					 :on-remove="upLoadRemove2" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
						<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传</el-button>
						<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
					</el-upload>
				</el-form-item>
			</el-col>
			<el-col :span="7" :offset='1'>
				<el-form-item label="社保附件:" prop="pactAffix1">
					<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList4" :on-change="upLoadChange4"
					 :on-remove="upLoadRemove4" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
						<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传</el-button>
						<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传1张</div>
					</el-upload>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="7" :offset='1'>
				<el-form-item label="劳动合同附件:" prop="pactAffix">
					<el-upload :on-preview="upLoadPreview" action="" accept=".jpg,.jpeg,.png" :file-list="fileList3" :on-change="upLoadChange3"
					 :on-remove="upLoadRemove3" :auto-upload="false" list-type="picture" name="upfile" :disabled='detailDisable'>
						<el-button size="mini" type="primary" :disabled='detailDisable'>点击上传</el-button>
						<div slot="tip" class="upLoadText">只能上传JPG/PNG/JPEG图片,大小不超过800kb/最多上传10张</div>
					</el-upload>
				</el-form-item>
			</el-col>
		</el-row>
		<div v-if="isRole == 10 && role == 0 && nowStatus == 2">
			<!-- <div class="header">
				<div class="listName">
					<i></i><span class="font14">匹配结果</span>
				</div>
			</div>
			<el-row :gutter="20">
				<el-col :span="7" :offset='1'>
					<el-form-item label="更新状态:">
						<el-input size="mini" v-model="updataType" autocomplete="off" clearable disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="最后更新时间">
						<el-date-picker size="mini" v-model="lastUpdataTime" type="date" placeholder="请选择最后更新时间" format="yyyy-MM-dd HH:mm:ss"
						 value-format="yyyy-MM-dd HH:mm:ss" clearable disabled>
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row> -->
			<div class="header">
				<div class="listName">
					<i></i><span class="font14">备案原始数据</span>
				</div>
			</div>
			<el-row>
				<el-col :span="16" :offset="1">
					<div class="copy" id="content">
						{{recordCon}}
					</div>
					<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy">复制所有备案信息</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="16" :offset="1">
					<div class="copy" id="content1" style="white-space: inherit;">
						
						{{recordCon1}}
					</div>
					<el-button type="primary" style="margin-left: 170px;margin-top:15px" @click="copy1">复制所有返回信息</el-button>
				</el-col>
			</el-row>
		</div>
		<el-dialog custom-class="imgDialogShow" :visible.sync="imgDialogShow" :append-to-body='true' :before-close='closeImg'>
			<img :src="dialogImgUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		axiosChange,
		moment
	} from "@/common.js";
	export default {
		props: {
			nowStatus: {
				type: Number,
				default () {
					return 0 //0是新增  1是编辑  2是详情
				}
			}
		},
		mounted() {
			if (localStorage.roleCurrentId) {
				this.roleCurrentId = JSON.parse(localStorage.roleCurrentId).id
			} else {
				this.roleCurrentId = ''
			}
			if (this.nowStatus) {
				this.getComplieList()
			}
		},
		data() {
			return {
				imgDialogShow: false, //查看大图
				dialogImgUrl: '',
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				personStatusArr: [{
						label: '在职',
						value: 10
					},
					{
						label: '离职',
						value: 20
					},
				],
				t1Num: true,
				t2Num: true,
				pactDis: true,
				form: {
					personStatus: '',
					identity: '',
					homeAddress: '',
					t1Papers: '',
					t1PapersTime: '',
					t2Papers: '',
					t2PapersTime: '',
					pactStartTime: '',
					pactEndTime: '',
				},
				roleCurrentId: '',
				isRole: '',
				recordCon: '',
				recordCon1: ''
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
			detailDisable() {
				if (this.nowStatus == 2) {
					return true
				} else {
					return false
				}
			},
			//控制结束时间范围
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.form.pactStartTime)
					}
				}
			},
		},
		watch: {
			form: {
				handler(val, oldVal) {
					this.$emit("getChildValue", {
						value: this.form
					})
				},
				deep: true
			},
			fileList1(val, oldValue) {
				this.$emit("fileList1Change", {
					value: this.fileList1
				})
			},
			fileList2(val, oldValue) {
				this.$emit("fileList2Change", {
					value: this.fileList2
				})
			},
			fileList3(val, oldValue) {
				this.$emit("fileList3Change", {
					value: this.fileList3
				})
			},
			fileList4(val, oldValue) {
				this.$emit("fileList4Change", {
					value: this.fileList4
				})
			},
		},
		methods: {
			copy() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			copy1() {
				/* 创建range对象   */
				const range = document.createRange();
				range.selectNode(document.getElementById('content1'));
				/* 窗口的selection对象，表示用户选择的文本 */
				const selection = window.getSelection();
				if (selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
				selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中
				document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
			},
			//获取编辑数据
			getComplieList() {
				let url = '/user/user/' + this.roleCurrentId
				axiosGet(url, {}, (res) => {
					if (res.code == 0) {
						this.isRole = res.detail.role
						if (this.isRole == 10) {
							if (Object.keys(res.detail.registers).length > 0) {
								if (res.detail.registers.rec) {
									this.recordCon1 = res.detail.registers.rec
								} else {
									this.recordCon1 = {}
								}
								if (res.detail.registers.send) {
									this.recordCon = res.detail.registers.send
								} else {
									this.recordCon = {}
								}
							}
						}
						this.form.personStatus = res.detail.status
						this.form.identity = res.detail.card_id
						this.form.homeAddress = res.detail.home_addr
						this.form.t1Papers = res.detail.t1_card_no
						this.form.t1PapersTime = res.detail.t1_end_time
						this.form.t2Papers = res.detail.t2_card_no
						this.form.t2PapersTime = res.detail.t2_end_time
						this.form.pactStartTime = res.detail.contract_start_time
						this.form.pactEndTime = res.detail.contract_end_time
						this.fileList3 = res.detail.contract_file.map(item => ({
							name: '',
							url: item
						}))
						this.fileList1 = res.detail.t1_card_file.map(item => ({
							name: '',
							url: item
						}))
						this.fileList2 = res.detail.t2_card_file.map(item => ({
							name: '',
							url: item
						}))
						this.fileList4 = [{
							name: '',
							url: res.detail.social_security
						}]

						if (this.form.t1Papers) {
							this.t1Num = false
						}
						if (this.form.t2Papers) {
							this.t2Num = false
						}
						if (this.form.pactStartTime) {
							this.pactDis = false
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			publicLoadChange(file, fileList, current) {
				const isLt2M = file.size / 1024 < 800;
				if (file.name.split(".")[1] != "jpg" && file.name.split(".")[1] != "png" && file.name.split(".")[1] != "jpeg") {
					this.$message.error('只能上传JPG/PNG/JPEG格式图片');
					if (current == 1) {
						this.fileList1 = fileList.slice(0, -1);
					} else if (current == 2) {
						this.fileList2 = fileList.slice(0, -1);
					} else if (current == 3) {
						this.fileList3 = fileList.slice(0, -1);
					} else {
						this.fileList4 = fileList.slice(0, -1);
					}
					return
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 800kb!,请重新上传');
					if (current == 1) {
						this.fileList1 = fileList.slice(0, -1);
					} else if (current == 2) {
						this.fileList2 = fileList.slice(0, -1);
					} else if (current == 3) {
						this.fileList3 = fileList.slice(0, -1);
					} else {
						this.fileList4 = fileList.slice(0, -1);
					}
					return
				}
				if (current == 1) {
					this.fileList1 = fileList.slice(-10);
				} else if (current == 2) {
					this.fileList2 = fileList.slice(-10);
				} else if (current == 3) {
					this.fileList3 = fileList.slice(-10);
				} else {
					this.fileList4 = fileList.slice(-1);
				}
			},
			//文件状态发生变化的时候钩子
			upLoadChange1(file, fileList) {
				this.publicLoadChange(file, fileList, 1)
			},
			upLoadChange2(file, fileList) {
				this.publicLoadChange(file, fileList, 2)
			},
			upLoadChange3(file, fileList) {
				this.publicLoadChange(file, fileList, 3)
			},
			upLoadChange4(file, fileList) {
				this.publicLoadChange(file, fileList, 4)
			},
			//文件列表移除文件时的钩子
			upLoadRemove1(file, fileList) {
				this.fileList1 = fileList;
			},
			upLoadRemove2(file, fileList) {
				this.fileList2 = fileList;
			},
			upLoadRemove3(file, fileList) {
				this.fileList3 = fileList;
			},
			upLoadRemove4(file, fileList) {
				this.fileList4 = fileList;
			},
			//点击图片时触发
			upLoadPreview(file) {
				this.imgDialogShow = true
				this.dialogImgUrl = file.url
			},
			//关闭查看图片
			closeImg() {
				this.imgDialogShow = false
			},
			t1Change(res) {
				if (res) {
					this.t1Num = false
				} else {
					this.t1Num = true
					this.form.t1PapersTime = ''
				}
			},
			t2Change(res) {
				if (res) {
					this.t2Num = false
				} else {
					this.t2Num = true
					this.form.t2PapersTime = ''
				}
			},
			pactTimeChange(res) {
				if (res) {
					this.pactDis = false
				} else {
					this.pactDis = true
					this.form.pactEndTime = ''
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.header {
		display: flex;
		justify-content: space-between;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}
</style>
